<template>
    <!--H5模板-->
  <div class="app-container">
    <el-form label-width="85px" inline  class="demo-form-inline">
            <el-form-item label="模板名称：">
                <el-input v-model="queryParams.user" clearable placeholder="请输入模板名称"></el-input>
            </el-form-item>
            <el-form-item label="活动类型">
                <el-select v-model="queryParams.region1" clearable placeholder="请选择活动类型">
                    <el-option label="全部" value="shanghai"></el-option>
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="关联商户">
                   <remote-select
                        filterable
                        remote
                        :remote-method = "remoteMethod"
                        v-model="queryParams.region8"
                        :labelKey ="selectParams.department.selectName"
                        :valueKey ="selectParams.department.id"
                        :action = "selectParams.department.selectApi"
                        :actionQuery = "selectParams.department.actionQuery"
                        :changeQuery = "selectParams.department.changeQuery"
                        :option = "selectParams.department.options"
                        placeholder="请输入关联商户名称"
                        @change-data="choseDepartment"
                        @after-action = "getDepartmentList"
                        ></remote-select >
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="queryObj">查询</el-button>
                <el-button type="success" @click="newObj">创建模板</el-button>
            </el-form-item>
    </el-form>
    <simple-tab class="listTab" v-model="activeTab" @change="refreshTable" :tabs="[{label:'全部模板',value:1},{label:'使用中',value:2},{label:'已停用',value:3}]">
    </simple-tab>
   <page-table ref="table" :fetch="getTableList" :query="queryParams" :show-header="false">
    <el-table-column label="模板名称">
        <template slot-scope="{row}">
            <div class="table-card">
                <div class="card-item card-img">
                    <img :src="row.images" />
                </div>
                <div class="card-item card-content">
                    <div><span class="label"></span><span class="value">大转盘基础</span></div>
                    <div><span class="label">使用情况：</span><span class="value">使用中</span></div>
                    <div><span class="label">活动类型：</span><span class="value">限时抢券模板</span></div>
                    <div><span class="label">创建人：</span><span class="value">某某某</span></div>
                    <div><span class="label">在用活动数量：</span><span class="value">100</span></div>
                    <div><span class="label">最近修改：</span><span class="value">某某某</span></div>
                    <div><span class="label">在用商家数量：</span><span class="value">10</span></div>
                    <div><span class="label">更新时间：</span><span class="value">2018.10.01</span></div>
                </div>
              <div class="card-item card-button">
                    <el-button type="text" @click="editObj(row)">预览</el-button>
                    <el-button type="text" @click="deleteObj(row)">使用详情</el-button>
                    <el-button type="text" @click="editObj(row)">编辑模板</el-button>
                     <el-button type="text" @click="editObj(row)">停用模板</el-button>
                </div>
            </div>
        </template>
      </el-table-column>
    </page-table>
  </div>
</template>

<script>
import { getExamplePageList } from '@/api/document'
import { getDepartmentList } from '@/api/staff'
export default {
  data () {
    return {
      activeTab: 2,
      queryParams: {},
      query: false,
      dialogTitle: '',
      params: {},
      rules: {
        arg1: { required: true, max: 8, message: '请输入名称,最多8个字', trigger: 'blur' },
        arg2: { required: true, message: '请输入客户去向', trigger: 'blur' },
        arg6: { required: true, message: '请输入联系方式', trigger: 'blur' }
      },
      selectParams: { // 选项接口参数
        department: {
          selectName: 'departmentName',
          id: 'id',
          selectApi: getDepartmentList,
          actionQuery: {
            type: 'option'
          },
          changeQuery: '',
          options: [],
          list: []
        },
        Dialogdepartment: {
          selectName: 'departmentName',
          id: 'id',
          selectApi: getDepartmentList,
          actionQuery: {
            type: 'option'
          },
          changeQuery: '',
          options: [],
          list: []
        }
      }
    }
  },
  methods: {
    getTableList (query) {
      query.limit = 5
      return getExamplePageList(query)
    },
    refreshTable () {
      this.$refs.table.refresh()
    },
    // 查询用
    getDepartmentList (msg) {
      this.selectParams.department.list = msg
    },
    choseDepartment (val, msg) {
      var remote = ''
      if (msg) {
        if (msg.departmentName !== undefined) {
          this.remoteMethod(msg.departmentName)
        } else {
          this.remoteMethod(remote)
        }
      } else {
        this.remoteMethod(remote)
      }
    },
    remoteMethod (query) {
      if (query !== '') {
        setTimeout(() => {
          this.selectParams.department.options = this.selectParams.department.list.filter((item, index) => {
            return item.departmentName.indexOf(query) > -1
          })
        }, 200)
      } else {
        this.selectParams.department.options = this.selectParams.department.list
      }
    },
    queryObj () {
      this.query = this.queryed(this.queryParams)
      this.refreshTable()
    },
    newObj () {
      this.dialogTitle = '新建'
      //    this.$refs.submitDialog.dialogOpen()
    },
    editObj (row) {
      this.dialogTitle = '编辑'
    },
    deleteObj (row) {
      var _this = this
      this.confirmBox({
        title: '确认删除影片模板',
        message: '影片模板' + '“' + row.col1 + '”' + '删除后，该账号将无法登陆，且不可恢复，确认删除后立即生效。',
        okText: '确认删除',
        callback (action, instance) {
          // 方法内使用js写法
          if (action === 'confirm') {
            _this.messageBox({
              message: '该影片模板已删除！'
            })
            _this.refreshTable()
          } else if (action === 'cancel') {
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
